<template>
    <div class="personal-info">
      <h2>个人信息</h2>
      <form @submit.prevent="saveChanges">
        <p v-if="!isEditing">
          姓名: {{ personalInfo.name }}<br />
          电话: {{ personalInfo.phone }}<br />
          银行卡号: {{ personalInfo.cardNumber }}
        </p>
        <div v-if="isEditing">
          <label for="name">姓名:</label>
          <input id="name" v-model="personalInfo.name" type="text" required />
          <label for="phone">电话:</label>
          <input id="phone" v-model="personalInfo.phone" type="tel" required />
          <label for="cardNumber">银行卡号:</label>
          <input id="cardNumber" v-model="personalInfo.cardNumber" type="text" required />
        </div>
        <button type="button" @click="toggleEdit">{{ isEditing ?"取消":"编辑" }}</button>
        <button type="submit" @click="saveChanges">保存</button>
      </form>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        personalInfo: {
          name: '阳哈哈',
          phone: '11111111111',
          cardNumber: '1234567890122'
        },
        isEditing: false,
      };
    },
    methods: {
      toggleEdit() {
        this.isEditing = true;
      },
      saveChanges() {
        // Save changes logic here
        this.isEditing = false;
      }
    }
  };
  </script>
  
  <style scoped>
  /* Add styles here */
  </style>